<template>
  <div class="m-5 result-success11">
    <Result status="success" title="知己等级：11" sub-title="提交结果页用于反馈一系列操作任务的处理结果， 如果仅是简单操作，使用 Message 全局提示反馈即可。 本文字区域可以展示简单的补充说明，如果有类似展示 “单据”的需求，下面这个灰色区域可以呈现比较复杂的内容。">
      <template #icon>
        <SkinTwoTone />
      </template>
      <template #extra>
        <a-button key="buy" type="primary"> 她的战绩 </a-button>
        <a-button key="buy"> 你的战绩 </a-button>
        <a-button key="buy"> 共同战斗记录 </a-button>
      </template>
    </Result>
    <Descriptions title="你们的亲密关系">
      <!-- <DescriptionItem label="项目 ID"> <smile-twoTone />111222 </DescriptionItem>
      <DescriptionItem label="负责人"> Jeecg </DescriptionItem>
      <DescriptionItem label="生效时间"> 2016-12-12 </DescriptionItem> -->
    </Descriptions>
    <Steps :current="2" progress-dot size="small">
      <Step title="第一天">
        <template #description>
          <div>成为亲密第1天喽，向ta打个招呼吧！</div>
          <p>2025-07-04 12:32</p>
        </template>
      </Step>
      <Step title="大乱斗时刻">
        <template #description>
          <div>欧耶，乱斗组队1次了</div>
          <div>棒，达成了先拔头筹</div>
          <div>共同摧毁1座建筑</div>
          <div>共同击杀16次敌人</div>
          <p>2025-07-05</p>
        </template>
      </Step>
      <Step title="排位日记">
        <template #description>
          <div>加油，组队1次排位了</div>
          <div>棒，合力1次二连破</div>
          <div>共同击杀30次敌人</div>
          <p>2025-07-08</p>
        </template>
      </Step>
      <Step title="赛季记忆">
        <template #description>
          <div>组队完成13次对局</div>
          <div>组队赢得5场对局</div>
          <div>获得3场连胜</div>
          <div>一起赢得2次S评价</div>
          <div>一起赢得6次A评价</div>
          <div>合力达成9次2连破</div>
          <div>合力达成1次3连破</div>
          <div>共同摧毁6座建筑</div>
          <div>一起击败79个敌人</div>
          <div>一起消灭1只怪兽</div>
          <p>2025-07-17</p>
        </template>
      </Step>
      <Step title="记录不完了，请结婚吧" >
        <template #description>
          <p>2025-08-07</p>
        </template>
      </Step>
    </Steps>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import { SkinTwoTone } from '@ant-design/icons-vue';
import { Result, Steps, Descriptions } from 'ant-design-vue';
const DescriptionItem = Descriptions.Item;
const Step = Steps.Step;
</script>
<style lang="less" scoped>
.result-success {
  padding: 48px 32px;
  background-color: @component-background;

  &__content {
    padding: 24px 40px;
    background-color: @background-color-light;
  }
}
</style>
